<template>
    <div>
        <div class="container">
            <el-main>
                <el-form ref="borderFormRef" :rules="borderFormRules" :model="borderForm" :label-width="formLabelWidth">
                    <el-form-item label="ID" prop="id" v-if="false">
                        <el-input v-model="borderForm.id" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌名称" prop="boardName">
                        <el-input v-model="borderForm.boardName" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌英字" prop="boardEnname">
                        <el-input v-model="borderForm.boardEnname" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌LOGO" prop="boardLogo">
                        <el-input v-model="borderForm.boardLogo" placeholder="品牌LOGO" v-if="false"/>
						<el-avatar v-if="masterImageUrl" class="avatar" shape="square" :src="masterImageUrl" />
                        <VAvatarUpload v-else v-bind:selectValue="VAvatar" @avatar="func_loadVAvatarData" />
                    </el-form-item>
                    <el-form-item label="品牌排序" prop="sort">
                        <el-input v-model="borderForm.sort" v-if="false"></el-input>
                        <el-input-number v-model="sortNum" :min="1" :max="100" />
                    </el-form-item>
                </el-form>
            </el-main>
			<el-footer>
                <el-button type="primary" @click="func_onSubmit" plain>保存数据</el-button>
                <el-button type="success" @click="func_onReset" plain>重置表单</el-button>
                <el-button @click="func_closeDialog" plain>取 消</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findBoardInfoListById, addBoardInfo, saveBoardInfo, } from "../../../../api/hairmanager/board";
import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

import VAvatarUpload from '../../../../components/AvatarUpload.vue';

export default {
    name: "borderForm",
    components: {VAvatarUpload,},
  	props:{
        selectValue: Object,
	},
	emits: ["borderdata"],
    setup(props, cex) {
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = formLabelWidth;
        let loadFlg = false
        const sortNum = ref(0);
        const logoImageUrl = ref('');
        // =========================================================================================
        const borderFormRef = ref(null);
        const borderFormRules = {
            boardName: [
                { required: true, message: "请输入品牌名称", trigger: "blur" },
            ],
            boardEnname: [
                { required: true, message: "请输入品牌英字", trigger: "blur" },
            ],
        };
        /**
         * @name 定义业务表单
         */
        const getBorderFormData = () => {
            return {
                id: null,
                boardName: "",
                boardLogo: "",
                boardEnname: "",
                sort: 0,
            }
        };
        /**
         * @name 映射表单
         */
        const borderForm = reactive(getBorderFormData());
        const formRef = ref(null);
        /**
         * @name 表单初始化
         */
        const resetBorderForm = () => {
            Object.assign(borderForm, getBorderFormData());
        };
        // 主业务处理 ========================================================================================= START
        const func_onload = (v) => {
            findBoardInfoListById(v).then((res) => {
                Object.keys(borderForm).forEach((item) => {
                    borderForm[item] = res.data[item];
                });
                sortNum.value = borderForm['sort'];
                masterImageUrl.value = borderForm['boardLogo'];
            });
        };
        /**
         * @name 数据提交
         */
        const func_onSubmit = () => {
            borderForm['sort'] = sortNum;
            // 表单校验
            borderFormRef.value.validate((valid) => {
                if (valid) {
                    if(loadFlg){
                        saveBoardInfo(borderForm).then((res) => {
                            if(res.code != 200) {
                                if(res.type === null){
                                    ElMessage.error(res.message);
                                }else if(res.type === 0) {
                                    ElMessage.warning(res.message);
                                } else {
                                    ElMessage.error(res.message);
                                }
                            } else {
								resetBorderForm();
								ElMessage.success(SUCCESS_EDITDATA_DIALOG_MESSAGE);
                                cex.emit('borderdata', {state: 1, data: []});
                            }
                        });
                    } else {
                        addBoardInfo(borderForm).then((res) => {
                            if(res.code != 200) {
                                if(res.type === null){
                                    ElMessage.error(res.message);
                                }else if(res.type === 0) {
                                    ElMessage.warning(res.message);
                                } else {
                                    ElMessage.error(res.message);
                                }
                            } else {
                                resetBorderForm();
                                ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
                                cex.emit('borderdata', {state: 1, data: []});
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        };
        // 重置
        const func_onReset = () => {
            resetBorderForm();
        };
        const func_closeDialog = () => {
            cex.emit('borderdata', {state: 1, data: []});
        };
        // 主业务处理 ========================================================================================= END
		// 主图上传 ========================================================================================= START
        let masterImageUrl = ref('');
        const VAvatar = reactive({});
        const func_loadVAvatarData = (v) => {
            if(v['state'] === 1) {
                masterImageUrl.vlaue = v['imgUrl'];
                borderForm['boardLogo'] = v['imgUrl'];
            }
        };
        // 主图上传 ========================================================================================= END
        // 业务数据监听
        watch(() => props.selectValue, (val) => {
            // 判定页面内表单处理区分，true初始化表单，否则读取ID对应的表单数据
            if(val['load']){
                func_onload(props.selectValue['id']);
            } else{
                resetBorderForm();
            }
            loadFlg = val['load'];
        },{deep: true,immediate: true});
        // =========================================================================================================
        return {
            // 系统变量 =========================================================================================
            load, formLabelWidth, sortNum,
            borderForm, getBorderFormData, resetBorderForm, borderFormRef, borderFormRules,
            // 主业务调用方法 =========================================================================================
            func_onload, func_onSubmit, func_onReset, func_closeDialog,
			// =========================================================================================
            // 图片文件处理 =========================================================================================
            masterImageUrl, VAvatar, func_loadVAvatarData,
        };
    },
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 180px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.avatar {
	width: 300px;
	height: 300px;
	display: block;
	align: center;
}
</style>